<template>
  <div class="compilationSummary">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">横向收入</div>
      </div>
    </div>

    <div class="table-content clearfix">
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="主量收入" name="first">
            <tab1 ref="tab1"></tab1>
          </el-tab-pane>
          <!--          <el-tab-pane label="存增量" name="second">-->
          <!--            <tab2 :rowData="tableData" :colDefList="colDefList" ref="tab2"></tab2>-->
          <!--          </el-tab-pane>-->
          <el-tab-pane label="总收入" name="second">
            <tab2 ref="tab2"></tab2>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import tab1 from "./tab1";
import tab2 from "./tab2";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
export default {
  name: "transverseIncome",
  components: {
    tab1,
    tab2,
  },
  data() {
    return {
      showFlag: false,

      activeName: "first",
      flag: 1,
      accountInfo: "",
      tableData: [],
      colDefList: [],
      areaMap: {},
      exportLoad: false,
    };
  },
  computed: {
    // areaSelect() {
    //   return this.form.areaSelect;
    // },
  },
  // created() {
  //   let query = this.$route.query;
  //   this.backRecord = typeof(query.backRecord) === undefined ? true : false;
  //     let date = new Date()
  //     let month = date.getMonth()
  //   month = month <10 ? "0" + month : month
  //   this.form.month = date.getFullYear() + month ;
  //   if (this.backRecord) {
  //     this.form.areaId = query.areaId;
  //   } else {
  //     this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
  //     this.form.areaId = this.accountInfo.areaId;
  //   };
  //   // this.getmonth()
  // },
  mounted() {
    // this.init();
  },
  methods: {
    // listResourceData(params) {
    //   switch (params.flag) {
    //     case 1:
    //       this.$refs.tab1.tableLoading = true;
    //       break;
    //     case 2:
    //       this.$refs.tab2.tableLoading = true;
    //       break;
    //     case 3:
    //       this.$refs.tab3.tableLoading = true;
    //       break;
    //   }
    //   console.log(params);
    //   $budgetAPI.budgetHorizontalIncome(
    //     params,
    //     (res) => {
    //       if (res.code == 0) {
    //         this.tableData = [];
    //         this.colDefList = [];
    //         this.tableData = res.content.data;
    //         this.tableData.forEach((item) => {
    //           Object.assign(item, item.map);
    //         });
    //         console.log(this.tableData);
    //         // this.colDefList = res.content.columns;
    //         this.areaMap = res.content.areaMap;
    //         this.showFlag = true;
    //         setTimeout(() => {
    //           switch (params.flag) {
    //             case 1:
    //               this.$refs.tab1.init();
    //               this.$refs.tab1.tableLoading = false;
    //               break;
    //             case 2:
    //               this.$refs.tab2.init();
    //               this.$refs.tab2.tableLoading = false;
    //               break;
    //             case 3:
    //               this.$refs.tab3.init();
    //               this.$refs.tab3.tableLoading = false;
    //               break;
    //           }
    //         }, 500);
    //       } else {
    //         this.alertError(res);
    //       }
    //     },
    //     (err) => {}
    //   );
    // },
    // init() {
    //   if (this.$route.query.backRecord) {
    //     let query = this.$route.query;
    //     let params = {
    //       acctMonth: query.accMonth,
    //       importFlag: true,
    //       areaId: query.areaId,
    //       autoService: query.autoService,
    //       flag: this.flag,
    //     };
    //     this.listResourceData(params);
    //   } else {
    //     let params = {
    //       acctMonth: this.form.month,
    //       areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
    //       autoService: this.form.autoService,
    //       flag: this.flag,
    //     };
    //     this.listResourceData(params);
    //     this.activeName = "first";
    //   }
    // },
    //数据点击切换页请求不同的数据
    handleClick(tab, event) {
      // let params = {
      //   acctMonth: this.form.month,
      //   areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
      //   flag: null,
      //   autoService: this.form.autoService,
      // };
      if (tab.name == "first") {
        // params.flag = 1;
        this.flag = 1;
        // this.$refs.tab1.init();
        // this.listResourceData(params);
      }
      if (tab.name == "second") {
        // params.flag = 2;
        this.flag = 2;
        this.$refs.tab2.search();
        // this.listResourceData(params);
      }
      if (tab.name == "third") {
        params.flag = 3;
        this.flag = 3;
        this.listResourceData(params);
      }
    },
    // 获取年份
    // getmonth() {
    //   $budgetAPI.getBudgetmonth(
    //     {},
    //     (res) => {
    //       if (res.code == 0) {
    //         this.form.month = res.content;
    //         this.init();
    //       } else {
    //         this.alertError(res);
    //       }
    //     },
    //     (err) => {}
    //   );
    // },
  },
};
</script>

<style lang="scss" scoped>
.compilationSummary {
  .table-content {
    .table-header {
      display: flex;
      justify-content: space-between;

      .btn-right {
        display: flex;
      }

      .table-title {
        font-size: 14px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;

        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #418ee9;
          border-radius: 1000%;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 3px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.compilationSummary {
  .formList {
    .el-form-item {
      width: 22%;
    }
    .el-form-item:last-child {
      width: 32%;
      .el-form-item__content {
        width: 100%;
      }
    }
    .el-form-item.btnBox {
      margin-bottom: 0px;
      width: 18%;
      margin-right: 0;

      .el-form-item__content {
        display: flex;
      }
    }
  }
}
</style>
